<template>
	<view class="patientBox">
		<view class="patient-navigation-box">
			<!-- 导航栏头部 -->
			<view class="patient-navigation">
				<view class="patient-navigation-left">
					<picker class="doctor-picker" :value="doctorIndex" :range="doctorList" @change="bindPickerChange($event)">
						<view>{{doctorList[doctorIndex]}}</view>
					</picker>
				</view>
				<view class="patient-navigation-title" @tap="open">{{navigationTitle}}</view>
				<view class="patient-navigation-right" @tap="appointmentAdd">新建</view>
			</view>
			
			<!-- 显示一周时间 -->
			<view class="headerDate">
				<view class="weekdays">
					<view class="weekdays-item" v-for="(item,index) in weekList" :key="index">{{item}}</view>
				</view>
				<view class="days">
					<view class="days-item" v-for="(item,index) in dayList" :key="index"><text @tap="witchingTime(item.witchingTime)" :class="item.status===1?'sameDay':''">{{item.time}}</text></view>
				</view>
			</view>
		</view>
		
		<!-- 预约数据盒子 -->
		<view id="reservationData">
			<view class="reservationData-item" v-for="(item,index) in reservationData" :key="index">
				<view class="reservationData-item-head">
					<view class="doctor-box">戴医生</view>
					<view class="modify-btn">修改预约</view>
				</view>
				<view class="reservationData-item-content">
					<view class="view-box"><text class="title">患者：</text><text>刘狗子</text></view>
					<view class="view-box"><text class="title">时间：</text><text>11:00 - 12:00</text></view>
					<view class="view-box"><text class="title">项目：</text><text>种植</text></view>
					<view class="view-box"><text class="title">备注：</text><text>牙齿都烂了，想拔牙种植</text></view>
				</view>
			</view>
		</view>
		
		<!-- 时间插件 -->
		<uni-calendar :insert="false" ref="calendar" :start-date="startDate" :end-date="endDate" :date="date" :selected="selected" @confirm="confirm" @change="change" />
	</view>
	
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	
	// 封装时间 
	// 根据 type 返回一天时间 or 一周时间
	// 为tit返回一天时间   为day返回一周时间
	function getDate(time,type) {
		var date = time;
		var currentYear = date.getFullYear();
		var currentMonth = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
		var currentDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
		var currentWeek = date.getDay() === 0 ? 7 : date.getDay();
		var str = currentYear + "-" + currentMonth + "-" + currentDay;
		if (type === 'tit') return str
		var dayList = [];
		
		currentWeek--;
		for (var i = -currentWeek; i < 7 - currentWeek; i++) {
			var d = new Date(str);
			d.setDate(d.getDate() + i);
			var witchingMonth = (d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
			var witchingDay = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
			var witchingTime = d.getFullYear() + "-" + witchingMonth + "-" + witchingDay;
			if (date.getDate() === d.getDate()) {
				dayList.push({
					time: d.getDate(),
					status: 1,
					witchingTime:witchingTime
				})
			} else {
				dayList.push({
					time: d.getDate(),
					status: 0,
					witchingTime:witchingTime
				})
			}
		}
		if (type === 'day') return dayList
	}

	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				navigationTitle:getDate(new Date(),'tit'), // 返回一天时间
				weekList:['一','二','三','四','五','六','日'],
				dayList:getDate(new Date(),'day'), // 返回一周时间 ， status为1 = 今天 
				// 时间插件参数
				date: '',
				startDate: '',
				endDate: '',
				timeData: {
					clockinfo: '',
					date: '',
					fulldate: '',
					lunar: '',
					month: '',
					range: '',
					year: ''
				},
				selected: [],
				// 医生数据集合
				doctorIndex:0,
				doctorList:['请选择', '戴医生', '刘医生', '徐医生'],
				// 预约数据集合
				reservationData:[{'id':'1'},{'id':'2'},{'id':'3'},{'id':'4'},{'id':'5'}]
			};
		},
		methods:{
			// 日历插件弹出方法
			open() {
				this.$refs.calendar.open()
			},
			// 日历插件点击确定后回调方法
			confirm(e) {
				this.timeData = e
				this.date = this.timeData.fulldate
				var y = this.timeData.year;
				var m = this.timeData.month < 10 ? "0" + this.timeData.month : this.timeData.month;
				var d = this.timeData.date < 10 ? "0" + this.timeData.date : this.timeData.date;
				var time = y + "-" + m + "-" + d;
				this.navigationTitle = getDate(new Date(time),'tit')
				this.dayList = getDate(new Date(time),'day')
			},
			// 跳转到新建方法
			appointmentAdd(){
				uni.navigateTo({
					url: `/pages/appointment/appointment/appointment-addTo`,
				})
			},
			// 点击一周内某一天实时刷新
			witchingTime(obj){
				this.date = getDate(new Date(obj),'tit');
				this.navigationTitle = getDate(new Date(obj),'tit');
				this.dayList = getDate(new Date(obj),'day');
			},
			// 点击医生实时刷新信息
			bindPickerChange(event){
				this.doctorIndex = event.target.value;
			}
		}
	}
</script>

<style lang="scss">
	page,
	.patientBox{
		height: 100%;
	}
	.sameDay{
		color: red;
		background: #FFFFFF;
	}
	// 导航栏头部样式
	.patient-navigation-box{
		background-color:rgb(47,64,80);
		
		.patient-navigation{
			height:100rpx;
			display:flex;
			color:white;
			text-align:center;
			
			.patient-navigation-title{
				flex:2;
				font-size:16px;
				line-height: 100rpx;
			}
			.patient-navigation-left,
			.patient-navigation-right{
				width:120rpx;
				position:relative;
				line-height: 100rpx;
				
				.doctor-picker{
					position: absolute;
					left: 50%;
					top: 50%;
					width: 100%;
					transform: translate(-50%, -50%);
				}
			} 
		}
	}
	// 一周时间
	.headerDate{
		text-align: center;
		color: white;
		padding-bottom: 20rpx;
		
		.weekdays,.days{
			display: flex;
			text-align: center;
			
			.weekdays-item{
				flex: 1;
			}
			
			.days-item{
				flex: 1;
				text{
					display: inline-block;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50%;
				}
			}
		}
	}
	// 预约数据盒子样式
	#reservationData{
		height:calc(100% - 220rpx);
		overflow: auto;
		padding: 30rpx 10rpx 0;
		
		.reservationData-item{
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			
			.reservationData-item-head{
				display: flex;
				padding-bottom: 10rpx;
				
				.doctor-box{
					font-size: 16px;
					color: #111111;
				}
				
				.modify-btn{
					flex: 1;
					text-align: right;
					color: rgb(72,134,212);
				}
			}
			
			.reservationData-item-content{
				color: #666666;
				
				.view-box{
					display: flex;
				}
				
				.title{
					color: #111111;
					width: 90rpx;
				}
			}
		}
	}
	
	
</style>
